<script setup lang="ts">
defineOptions({
  name: "BaseDialog"
});
import { computed } from "vue";

interface Props {
  modelVlaue?: boolean;
  title?: string;
  width?: string;
  showHeader?: boolean;
  showFooter?: boolean;
  showCancel?: boolean;
  showConfirm?: boolean;
  showClose?: boolean;
  cancelText?: string;
  confirmText?: string;
  direction?: string;
  drawer?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelVlaue: false,
  title: "标题",
  width: "30%",
  cancelText: "取消",
  confirmText: "确认",
  direction: "rtl",
  showHeader: true,
  showFooter: true,
  showCancel: true,
  showClose: true,
  showConfirm: true,
  drawer: true
});
const emit = defineEmits(["update:modelValue", "cancel", "confirm", "open"]);
const dialogVisible = computed(() => {
  return props.modelVlaue;
});
const cancel = () => {
  emit("update:modelValue", false);
  emit("cancel", false);
};
const confirm = () => {
  emit("confirm");
};
import useData from "./hook/useData";

const { isFullScreen } = useData();
</script>

<template>
  <el-drawer
    v-if="false"
    :size="width"
    :show-close="false"
    @close="cancel"
    @open="emit('open')"
    :model-value="dialogVisible"
    :direction="direction"
    append-to-body
  >
    <template #header>
      <div v-if="showHeader">
        <slot name="header">
          <div class="dialog-header">
            <slot name="title">
              <div class="text-bold">{{ title }}</div>
            </slot>
            <div class="h-box">
              <div @click="cancel" title="关闭" class="cursor-pointer mg-l-sm">
                <el-icon>
                  <Close />
                </el-icon>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </template>
    <template #default>
      <div class="dialog-main" style="padding-top: 30px">
        <slot></slot>
      </div>
    </template>
    <template #footer>
      <div v-if="showFooter">
        <slot name="footer">
          <el-divider style="padding: unset; margin: 15px 0px 0px" />
          <div class="dialog-footer pad-t-lg pad-l-sm pad-r-lg">
            <slot name="footer-more-button"></slot>
            <el-button v-if="showCancel" @click="cancel">{{ cancelText }}</el-button>
            <el-button v-if="showConfirm" type="primary" @click="confirm">
              {{ confirmText }}
            </el-button>
            <el-button @click="cancel" type="primary" v-if="!showConfirm && !showCancel && showClose"> 关闭</el-button>
          </div>
        </slot>
      </div>
    </template>
  </el-drawer>
  <el-dialog
    v-else
    draggable
    destroy-on-close
    :fullscreen="isFullScreen"
    v-model="dialogVisible"
    :width="width"
    :show-close="false"
    @open="emit('open')"
    :before-close="cancel"
    append-to-body
  >
    <div class="dialog-main" style="padding-top: 30px">
      <slot></slot>
    </div>
    <template #header>
      <div v-if="showHeader">
        <slot name="header">
          <div class="dialog-header">
            <slot name="title">
              <div class="text-bold">{{ title }}</div>
            </slot>
            <div class="h-box">
              <div @click="isFullScreen = !isFullScreen" title="全屏" class="cursor-pointer">
                <el-icon>
                  <FullScreen />
                </el-icon>
              </div>
              <div @click="cancel" title="关闭" class="cursor-pointer mg-l-sm">
                <el-icon>
                  <Close />
                </el-icon>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </template>
    <template #footer>
      <div v-if="showFooter">
        <slot name="footer">
          <el-divider style="padding: unset; margin: 15px 0px 0px" />
          <div class="dialog-footer pad-t-sm pad-l-sm">
            <slot name="footer-more-button"></slot>
            <base-button   class="cursor-pointer" v-if="showCancel" @click="cancel" type="close_icon"></base-button>
            <base-button   class="cursor-pointer" v-if="showConfirm" @click="confirm" type="confirm_icon"></base-button>
            <!--            <el-button v-if="showCancel" @click="cancel">{{ cancelText }}</el-button>-->
            <!--            <el-button v-if="showConfirm" type="primary" @click="confirm">-->
            <!--              {{ confirmText }}-->
            <!--            </el-button>-->
            <base-button
              class="cursor-pointer"
              type="close_icon"
              @click="cancel"
              v-if="!showConfirm && !showCancel && showClose"
            ></base-button>
            <!--            <el-button @click="cancel" type="primary" v-if="!showConfirm && !showCancel && showClose"> 关闭 </el-button>-->
          </div>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px;
}

:global(.el-dialog) {
  padding: unset !important;
  display: flex;
  flex-direction: column;
}

:global(.el-dialog__header) {
  padding-bottom: unset !important;
  background: var(--el-color-primary);
  // height: 60px;
  align-items: center;
}

:global(.el-drawer__header) {
  padding: 10px 0px !important;
  background: var(--el-color-primary);
  // height: 60px;
  margin-bottom: unset !important;
  align-items: center;
}

:global(.el-dialog__body) {
  flex: 1;
  overflow-y: scroll;
  width: 100%;
  padding: unset !important;
  max-height: 100%;
}

:global(.el-drawer__body) {
  padding: unset !important;
}

:global(.el-dialog__body::-webkit-scrollbar) {
  width: 0px;
}

:global(.dialog-header) {
  height: 50px;
  padding: 0px 10px;
  color: #fff;
}
:global(.el-dialog__footer){
  padding-top: 0px !important;
}
</style>
